<template>
  <header :class="data.topClass" role="banner" @mouseover="mouseOver" @mouseleave="mouseLeave">
    <div class="site-top">
      <div class="site-branding"><span class="site-title"></span></div>
      <div class="header-user-avatar">
        <a v-on:click="login">
          <img class="faa-shake animated-hover" :src="data.avatar" width="30" height="30">
        </a>
        <div class="header-user-menu" v-if="!data.isLogin">
          <div class="herder-user-name no-logged">Whether to
            <a href="https://2heng.xin/login/" target="_blank" style="color:#333;font-weight:bold;text-decoration:none">log in</a> now?
          </div>
        </div>
        <div class="header-user-menu" v-if="data.isLogin">
          <div class="herder-user-name">当前已登录
            <div class="herder-user-name-u">{{ username }}</div>
          </div>
          <div class="user-menu-option"><a v-on:click="logout" target="_top">退出登录</a>
          </div>
        </div>
      </div>
      <div class="searchbox"><i :class="data.searchCss" v-on:click="search"></i></div>
      <div class="lower">
        <nav>
          <ul id="menu-new" class="menu">
            <li v-for="menu in data.menuList">
              <router-link :to="menu.path">
                  <span class="faa-parent animated-hover">
                    <i :class="menu.icon" aria-hidden="true"></i>
                    {{ menu.name }}
                  </span>
              </router-link>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import { findMenuList } from "../api/sys";
import {MenuItem} from "../api/modules/sys";

export default defineComponent({
  setup(props) {
    const data = reactive({
      searchCss: 'iconfont js-toggle-search iconsearch icon-search',
      topClass: 'site-header no-select',
      lowerCantiner: 'display:none',
      toUpdate: true,
      isLogin: false,
      avatar: 'https://media.inyaa.cn/none.png',
      username: '',
      scrollTop: '',
      menuList: [] as MenuItem
    })

    function jump(menu) {
      if(menu.code !== 'type'){
        this.$router.push(menu.path)
      }
    }
    function mouseOver() {
      this.lowerCantiner = ''
    }
    function mouseLeave() {
      if(this.toUpdate){
        this.lowerCantiner = 'display:none'
      }
    }
    const getMenu = async () => {
      data.menuList = await findMenuList() as MenuItem[]
    }
    function handleScroll() {
      if(document.body.clientWidth > 860){
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        const downHight = document.getElementById("banner_wave_1");
        if (scrollTop > downHight.offsetTop) {
          this.topClass = 'site-header no-select yya'
          this.toUpdate = false
          this.lowerCantiner = ''
        } else {
          this.topClass = 'site-header no-select'
          this.toUpdate = true
          this.lowerCantiner = 'display:none'
        }
      }
    }
    onMounted(async () => {
      await getMenu();
      window.addEventListener('scroll', handleScroll)
    });
    return {
      data,
      jump,
      getMenu,
      mouseOver,
      handleScroll,
      mouseLeave,
    };
  },
});
</script>
<style scoped>
.site-top .lower nav {
  display: block !important;
}
</style>

